<template>
	<div> 
		<!-- <so-header :seller="headerTitle"></so-header> -->
    <headerSearch :title="headerTitle" :searchBack="true" @done="gotobtn"></headerSearch>
    <!-- 搜索框 -->
    <!-- <div class="search_all_intop" :style="search_intop" v-if="searchISshow"> </div>
    <div class="search_all" v-if="searchISshow">
        <span class="search_span clear">
            <i class="iconfont icon-sousuo"></i>
            <input type="text" v-model="search" placeholder="搜索">
            <i class="iconfont icon-guanbi" v-if="clearShow" @click="clearClick"></i>
        </span>
        <button class="search_cancel fr" @click="searchCancel">取消</button>
    </div> -->
    <rearchKey :search_intop="search_intop" :searchISshow="searchISshow" v-on:spot="spot" :clearShow="clearShow" @clearClick="clearClick" @searchCancel="searchCancel"></rearchKey>
    <div class="suspension_content" style="background-color: #fff;">
      <!-- 地区、行业、协会下拉框 -->
      <!-- <div class="level_linkage">
          <div class="clear choseLanguage">
            <div>
                <input type="text" @click="choseUnit" value="地区" v-model="timer">
                <div class="panel" v-if="panelShow">
                    <li v-for="item in UnitList" :key="item.id" @click="handClick">{{item.name}}</li>
                </div>            
            </div>
            <div class="trangle"></div>
          </div>

          <div class="clear choseLanguage">
            <select v-model="DepartmentSelected">
                <option v-for="item in DepartmentList" :value="item.id" :key="item">{{item.name}}</option>
            </select>
            <div class="trangle"></div>
          </div>
          
          <div class="clear choseLanguage">
            <select v-model="UserSelected">
                <option v-for="item in UserList" :value="item.id" :key="item">{{item.name}}</option>
            </select>
            <div class="trangle"></div>
          </div> 
      </div> -->
      <!-- 地区、行业、协会下拉框 -->
      <div class="three_level_linkage">
        <div class="level_one" @click="levelOneclick" v-if="tid == 2 || tid == 3 || tid == 0">
          <div class="level_area">
           {{ad_name || '地区'}}
          </div>
          <div class="trangle"></div>
        </div>
        <div class="level_one" @click="levelTwoclick" v-if="tid == 1 || tid == 3 || tid == 0">
          <div class="level_area">
            {{hy_name || '行业'}}
          </div>
          <div class="trangle"></div>
        </div>
        <!-- <div class="level_one" @click="levelThreeclick">
          <div class="level_area">
            {{association || '协会'}}
          </div>
          <div class="trangle"></div>
        </div> -->
      </div>
      <!-- 头部浮层 -->
      <div class="main-suspension" style="background-color: #fff;"> 
        <div class="suspension-top"></div>
        <div class="suspension-info main_hot" style="box-shadow: 0px 8px 16px rgba(221, 221, 221, 0.349019607843137);">
          <!-- 卡片头部-上 -->
          <div class="suspension-info-top hot_top">
            <div class="title_text_more">
              <h3>热门圈子</h3>
              <!-- <router-link to="">更多<i class="iconfont icon-xiangyou"></i></router-link> -->
            </div>
          </div>
          <!-- 卡片头部-下 -->
          <!-- 大方形头像 -->
          <div class="big_square">
            <div v-if="circlelist == ''" class="failedLoadEmpty">
                <img src="../common/images/Disappointment.png" alt="">
                <span>暂无查询结果</span>
            </div>
            <ul class="soc" v-else>
              <li v-for="list in circlelist.slice(0, 4)" @click="JumpList(list.cid)" :key="list.id">
                    <!--  -->
                  <div class="soc_list_img">
                    <img :src="list.img" v-if="list.img"/>
                    <img src="../common/images/youquan.png" v-if="list.c_type == 3 && !list.img">
                    <span class="img_info_one" style="color: #DD948E;" v-if="list.c_type == 1 || list.c_type == 2">{{list.c_name.substring(0,1)}}</span>
                    <!-- <span class="img_info_one" style="color: #fff;" :style="'background-color:' + list.bgcolor" v-if="list.c_type == 1 || list.c_type == 2">{{list.c_name.substring(0,1)}}</span> -->
                  </div>
                  <span>{{list.c_name}}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>

      <!-- 所有圈子 -->
      <div class="all_main_list">
          <div class="title_text_more">
            <h3>所有圈子</h3>
            <a href="javascript:void(0)" @click="creaCircle()">创建圈子<i class="iconfont icon-xiangyou"></i></a>
          </div>
          <div class="association_lists" v-for="list in circlelist" :key="list.id">
              <div class="association_left" @click="JumpList(list.cid)">
                    <img :src="list.img" v-if="list.img"/>
                    <img src="../common/images/youquan.png" v-if="list.c_type == 3 && !list.img">
                    <span class="img_info_one" style="color: #DD948E;" v-if="list.c_type == 1 || list.c_type == 2">{{list.c_name.substring(0,1)}}</span>
                    <!-- <span class="img_info_one" style="color: #fff;" :style="'background-color:' + list.bgcolor" v-if="list.c_type == 1 || list.c_type == 2">{{list.c_name.substring(0,1)}}</span> -->
              </div>
              <div class="association_desc" @click="JumpList(list.cid)">
                  <h5>{{list.c_name}}</h5>
                  <div class="company_child" v-for="(child, childex) in list.company.slice(0,3)" :key="childex">
                    <em v-if="childex > 0">&nbsp;|&nbsp;</em> <span class="child_index">{{child}}</span>
                  </div>
              </div>
              <div class="btn_small_red" @click="addCircle(list)">
                  <!-- <button >加入</button> -->
                  <button v-if="list.show_status == 2">加入</button>
                  <button v-if="list.show_status == 1">查看</button>
              </div>
          </div>
          <infinite-loading :on-infinite="onInfinite" ref="infiniteLoading" style="margin-top: 0.6rem;">
              <span slot="no-more" class="contentEmpty">
                <template v-if="circlelist.length">
                    (ฅ>ω<*ฅ)我们是有底线的(ฅ>ω<*ฅ)
                </template>
                <template v-if="!circlelist.length">
                  <img src="../common/images/failedLoad.png" alt="">
                  <em>暂无查询结果</em>
                </template>
              </span>
              <!-- <span slot="no-results" class="contentEmpty">
                  <template v-if="circlelist.length">
                      (ฅ>ω<*ฅ)我们是有底线的(ฅ>ω<*ฅ)
                  </template>
                  <template v-if="!circlelist.length">
                      <img src="../common/images/failedLoad.png" alt="">
                      <em>暂无查询结果</em>
                  </template>
              </span> -->
          </infinite-loading>
      </div>
    </div>
   <!-- 地区 -->
    <AreaLinkage v-show="linkShow" @textnames="showLinkage"  @textnameId="showLinkageId" @done="closeAdd"></AreaLinkage>
    <!-- 行业 -->
    <IndustryLinkage v-show="industryShow" @categoryname="showIndustry" @categoryId="showIndustryId" @done="closeAdd" :industryshow="true"></IndustryLinkage>
    <!-- 选择地区
        <mt-popup v-model="popupVisible" position="bottom">
          <ul> 
              <li v-for="(list, listind) in UcircleList" :key="listind" @click="JoinAreaName(list.name,listind)">{{list.name}}</li>
          </ul>
        </mt-popup>
     选择行业 
        <mt-popup v-model="industrypopupVisible" position="bottom">
          <ul> 
              <li v-for="(list, industryind) in UindustryList" :key="industryind" @click="JoinIndustryName(list.industryName,industryind)">{{list.industryName}}</li>
          </ul>
        </mt-popup>
     选择协会 
        <mt-popup v-model="associationpopupVisible" position="bottom">
          <ul> 
              <li v-for="(list, associationind) in UassociationList" :key="associationind" @click="JoinAssociationName(list.associationName,associationind)">{{list.associationName}}</li>
          </ul>
        </mt-popup>

		 <div class="main-suspension"> 
			<div class="suspension-info">
					<div class="select-list"> 
		        		<a href="#">地区</a>
			        	<a href="#">行业</a>
			        	<a href="#">协会</a>
			        
		        	</div>
		        	<div class="el-circle-index-Introduction-list">
			          	<h4>热门圈子 <a href="#">更多 <i class="el-icon-arrow-right"></i></a></h4>
			              <ul> 
			              	<li v-for = "list in circlelist.slice(0, 4)" @click="JumpList(list.cid)" > 
			              		<img :src="list.img" />
			              		<p>{{list.c_name}}</p>
			              	</li>
			              	
			              </ul>
			          </div>
			</div>
		</div>
		<div class="main-content-empty"> 
		</div>
		<el-main class="main-circleList-list">
          <h4>所有圈子 <a href="#">更多 <i class="el-icon-arrow-right"></i></a></h4>-->
             	<!--<ul>
             	<li v-for = "list in circlelist" @click="JumpList(list.cid)"> 
             		<img :src="list.img" />
             		<div class="main-center">
	                   <h5>{{list.c_name}}</h5>
	                    <p>{{list.c_body}}</p>
	                 </div>
              	</li>
               
             </ul>
        </el-main> -->
		<so-footer></so-footer>
	</div>

  
</template>

<script>
import InfiniteLoading from 'vue-infinite-loading';
import headerSearch from '../public/header-search.vue';
import soFooter from '../components/footer-bar';
import AreaLinkage from '@/components/area_linkage';
import IndustryLinkage from '@/components/industry_linkage';
import rearchKey from '../public/rearchKey';
import { MessageBox } from 'mint-ui';
  export default {
    data() {
      return {
        // path: 'http://fc.x.e000.com',
      	headerTitle:'圈子列表',
        logining: false,
        circlelist:'',
        searchISshow: false,   //关键字搜索框出现
        clearShow: false,      //清除内容
        searche: '',            //输入内容
        // items: [],
        search_intop: '',      //搜索框遮罩层
        tid:'',
        userInfo: '',
        uid: '',
        c_hyId:'',
        c_adId:'',
        industryShow:false,
        linkShow: false,
        hy_name:'',
        ad_name:'',
        
        panelShow: false,
        time: '',
        page:0,     //上拉加载
        num:10,     //显示10条数据
        activesText: '',
        ptype:0,
      };
    },
    components:{
    	InfiniteLoading,
      soFooter,
      AreaLinkage,
      IndustryLinkage,
      headerSearch,
      rearchKey
    },
    watch: {
        searche(value) {
          if(value != '') {
              this.clearShow = true;
              this.search_intop = 'background-color: transparent; z-index: 0;'
            }else {
              this.clearShow = false;
              this.search_intop = 'background-color: rgba(0, 0, 0, 0.5);'
            }
        }
    },
    created() {
        let that = this;
        that.userInfo = window.localStorage.getItem('userInfo');
        that.userInfo = JSON.parse(that.userInfo);
        if(that.userInfo == null){
          that.uid = 0;
        }else{
          that.uid = that.userInfo.uid;
        }
        that.tid = that.$route.query.paicheNo;
        that.getcircleList(that.uid,that.tid);
        
    },
    methods: {
      //创建圈子
      creaCircle: function () {
        let that = this;
        let uid = that.uid;
        if(uid > 0){
            console.log('uid',uid);
          this.$post(
              that.$path + '/api.php/company/getAuthCompanyList', {
                userId: uid,
                type: 1
              })
            .then((res) => {
              if (res.code == '-1') {
                MessageBox.alert('您需要先绑定企业').then(action => {
                  this.$router.push({
                    path: '/companyCreate'
                  });
                });
              } else {
                this.$router.push({
                  path: '/crcircle'
                });
              }

            })
        }else{
          this.$router.push({path: '/login'}); 
        } 
        
      },
      // 获取 监听子组件input值的动向值
      spot(data) {
        this.searche = data;
        this.ptype = 1;
        this.onInfinite();
      },
      // 上拉加载
      onInfinite() {
        let that = this;
          console.log("触发")
          setTimeout(() => {       
              const temp = []; 
              let tid = this.tid;
              let uid = this.uid;
              let keyword = this.searche;
              if(!keyword) keyword = 0;
              //排序
              let page = '';
              if(that.ptype == 1){
                  that.circlelist = [];
                  page = 0;
              }else{
                  if(that.page == 0){
                      page = 1;
                  }else{
                      page = that.page;
                  }
              }
              console.log('key',page);
              that.$fetch(that.$path+'/api.php/Circle/getcircleList', {tid:tid,uid:uid,type:'1',page:page,keyword:keyword})
                .then((res) => {
                  
                  // console.log('首页',res);
                // if(res.code == 200){
                //   let array = res.data;
                //   array.reverse();
                //   page++;
                //   if(that.num > array.length){
                //       $state.complete();
                //       return;
                //   }
                //   array.forEach(element => {
                //     temp.push(element);
                //   });
                //   that.circlelist = that.circlelist.concat(temp);  
                //   $state.loaded();  
                // }else {
                //   $state.complete();
                //   return;
                // }    
                if(res.code == 200){
                  let array = res.data;
                  array.reverse();
                  that.page++;
                  that.page = page;

                  if(array == '') {
                      that.circlelist = [];
                  }else {
                      array.forEach(element => {
                          temp.push(element);
                      });
                      that.circlelist = that.circlelist.concat(temp); 
                      // console.log('999',that.circlelist);  
                      if(that.num > array.length){
                          that.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');
                          return;
                      }
                  }
                
                  that.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded');
                }else {
                    that.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');
                    return;
                }  
                that.ptype = 0;  
            });  
            
              
              // for (let i = this.list.length + 1; i <= this.list.length + 10; i++) {         
              //     temp.push(i);       
              // }       
              // this.list = this.list.concat(temp);       
              // $state.loaded();       
          }, 1000);
      },
      // 获取圈子列表
      getcircleList(uid,tid) {
        let that = this;
        // let page = that.page;
        let keyword = this.searche;
        if(!keyword) keyword = 0;
        this.$fetch(that.$path+'/api.php/Circle/getcircleList',{tid:tid,uid:uid,type:'1',page:'0',keyword:keyword})
          .then((res) => {
          	console.log(res);
            if(res.code == 200){
              that.circlelist = res.data;
            }    
        });
      },
      // 关闭选择地区
      closeAdd() {
        this.linkShow = false;
        this.industryShow = false;
      },
      //打开选择地区
      levelOneclick() {
        this.linkShow = !this.linkShow;
        
        // this.popupVisible = true;
      },
      JoinAreaName(name,listind) {
        this.area_name= name;
        this.popupVisible = false;
      },
      //打开选择行业
      levelTwoclick() {
        this.industryShow = !this.industryShow;
        // this.industrypopupVisible = true;
      },
      JoinIndustryName(industryName,industryind) {
        this.industry= industryName;
        this.industrypopupVisible = false;
      },
      //打开选择协会
      levelThreeclick() {
        this.associationpopupVisible = true;
      },
      JoinAssociationName(associationName,associationind) {
        this.association= associationName;
        this.associationpopupVisible = false;
      },
      //行业
      showIndustry(data) {
        this.hy_name = data;
        this.industryShow = false;
      },
      
      showIndustryId(data) {
        this.c_hyId = data;
        console.log('行业Id',this.c_hyId);
        //调用接口检索
        this.checkCircle();
        this.industryShow = false;
      },
      //地区Id
      showLinkageId(data) {
        this.c_adId = data;
        console.log('地区Id',this.c_adId);
        //调用接口检索
        this.checkCircle();
        this.linkShow = false;
      },
       // 选择好地区后绑定值在input框
      showLinkage(data) {
        this.ad_name = data;
         console.log('地区',this.ad_name);
        this.linkShow = false;
      },
      //调用接口进行圈子搜索
      checkCircle(){
        let that = this;
        let c_adId = that.c_adId;
        let c_hyId = that.c_hyId;
        let tid = that.tid;
        let uid = that.userInfo.uid;
        this.$fetch(that.$path+'/api.php/Circle/getcircleList',{tid:tid,uid:uid,type:'1',c_adId:c_adId,c_hyId:c_hyId})
          .then((res) => {
          	console.log('检索结果',res);
            if(res.code == 200){
              that.circlelist = res.data;
            }else{
              that.circlelist = '';
            }    
        });

      },
     

      //点击进入圈子首页
      JumpList(event) {
      	this.$router.push({path: '/userCenter/circleindex', query: {paicheNo: event}}); 
      	// this.$router.push({path: '/JoinCircle', query: {paicheNo: event}}); 
      },
      //点击"加入"圈子
      addCircle(event) {
        if(event.show_status == 1){
          this.$router.push({path: '/userCenter/circleindex', query: {paicheNo: event.cid}}); 
        }else{
          this.$router.push({path: '/JoinCircle', query: {cid: event.cid}});
        }
        
      },
      choseUnit() {
        this.panelShow = !this.panelShow;
      },
      handClick() {
        UnitList.push(this.timer);
      },
      // 点击搜索图标出现搜索框
      gotobtn() {
        this.searchISshow = true;
      },
      // 点击取消隐藏搜索框
      searchCancel(data) {
        this.searchISshow = false;
        // this.search = '';
        data = '';
      },
      // 清除内容
      clearClick(data) {
        // this.search = '';
        data = '';
      },
    },
    computed: {
        //过滤方法
      // circlelist: function() {
      //   let that = this;
      //     var _search = that.search;
      //     if (_search) {
      //         //不区分大小写处理
      //         var reg = new RegExp(_search, 'ig')
      //         //es6 filter过滤匹配，有则返回当前，无则返回所有
      //         return that.items.filter(function(e) {
      //             //匹配所有字段
      //             return Object.keys(e).some(function(key) {
      //                 let data = e.c_body + e.c_name;
      //                 return data.match(reg);
      //             })
      //             //匹配某个字段
      //             //  return e.name.match(reg);
      //         })
      //     };
      //     return that.items;
      // }
    },  
  }

</script>
<style >
@import '../common/css/userCenter.css';
.el-circle-index-Introduction-list{
    height: 180px;
    background: #fff;
    border-radius: 10px;
    padding: 15px 10px 0px 10px;
    
}

.el-circle-index-Introduction-list ul{
	margin:0;
	padding:0;
}
.el-circle-index-Introduction-list ul li{
	width:25%;
	float:left;
}
.el-circle-index-Introduction-list ul li img{
	    height: 60px;
    width: 60px;
}
.el-circle-index-Introduction-list h4{
	text-align:left;
	font-size:18px;
	color:#F00;
	margin: 15px 10px 25px 10px;
}
.el-circle-index-Introduction-list h4 a{
	color:#ccc;
	float:right;
	font-size:14px;
}
.el-circle-index-Introduction-list ul li p{
	    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
        font-size: 14px;
}
.select-list a{
	width:30%;
	float:left;
	color:#FFF;
}
.main-circleList-list{
      /* padding: 20px 0 20px 0; */
      background: #fff;
      margin-top:.2rem;
}
.main-circleList-list h4{
  margin: 0 0 20px 10px;
  padding: 0;
  text-align: left;
}
.main-circleList-list h4 a{
  float: right;
  color:#ccc;
  margin-right:10px;
  font-size: 14px;
}
.main-circleList-list h4 span{
  color:#f00;
  font-size:14px;
}
.el-icon-arrow-right{
      margin-top: 4px;
    margin-left: 5px; 
}
.main-circleList-list ul{
  width:100%;
  margin: 0;
  padding: 0;
}
.main-circleList-list ul li{
  width:100%;
  float: left;
  padding-left: 10px;
  padding-bottom: 10px;
  margin-top:15px;
  border-bottom: #d8d8d8 solid 1px;
}
.main-circleList-list ul .active{
  border-bottom: none;
}
.main-circleList-list ul li img{
    width: 70px;
    height: 70px;
    float: left;
    margin: 5px;
}
.main-center{
      text-align: left;
    margin-left: 2%;
    float: left;
    width:55%;
}
.main-center h5{
  font-size: 16px;
  margin: 0;
  padding: 0;
}
.main-center p{
  font-size: 16px;
}
.main-right {
  float: left;
    width: 20%;

}
.main-right .el-button {
      width: 60px;
    padding: 8px 10px;
    border-radius: 0;
    color: #fff;
}

/* 头部浮层-热门圈子 */
.main_hot {
  height: 3.1rem !important;
}
.hot_top {
  margin-top: 0 !important;
}
.hot_top h3 {
  color: #e50838;
}
.main_hot .soc li {
  margin-right: 0.64rem !important;
}
.main_hot .soc li:last-child {
  margin-right: 0 !important;
}

/* 所有圈子 */
.all_main_list {
  background-color: #fff;
  margin-top: 0.2rem;
}
/* 三级联动 */
.three_level_linkage {
  font-size: 0.3rem;
  color: #fff;
  font-weight: 400;
  background-color: #e50838;
  padding: 0.2rem 0;
  display: flex;
  justify-content: space-between;
  position: relative;
}
.three_level_linkage .level_one {
  flex: 1;
  width: 33.3%;
  margin-left: -0.2rem;
  border-right: 1px solid #f8f8f8;
}
.three_level_linkage .level_one:last-child {
  border-right: none;
}

/* 关键字搜索 */
.search_all_intop {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 12;
}
.search_all {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 12;
    background-color: #e50838;
    width: 100%;
    height: 0.88rem;
    line-height: 0.88rem;
}
.search_all .search_span {
    position: relative;
    width: 100%;
    height: 0.88rem;
}
.search_all .search_span .icon-sousuo {
    font-size: 0.3rem !important;
    position: absolute;
    left: 0;
    top: 0;
    margin: 0.16rem 0.2rem 0 -0.6rem;
    box-sizing: border-box;
    height: 0.88rem;
    margin-bottom: -0.3rem;
}
.search_all .search_span input {
    display: inline-block;
    width: 6.5rem;
    margin: 0 auto;
    margin-left: -0.7rem;
    height: 0.54rem;
    line-height: 0.54rem;
    background-color: #fff;
    margin-top: -0.1rem;
    border-radius: 4px;
    padding-left: 0.5rem;
    font-size: 0.28rem;
}
.search_all .search_span .icon-guanbi {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0.14rem 0.12rem 0 0.12rem;
}
.search_all .search_cancel {
    margin-top: -0.65rem;
    margin-right: 0.12rem;
    font-size: 0.28rem;
    color: #fff;
}



.soc .img_info_one {
    width: 1rem;
    height: 1rem;
    font-size: 0.3rem;
    line-height: 1rem;
    text-align: center;   
    background: url('../common/images/UI-04.png') no-repeat center;
    background-size: cover;
}
.association_left .img_info_one {
    width: 1rem;
    height: 1rem;
    vertical-align: super;
    font-size: 0.3rem;
    line-height: 1rem;
    text-align: center;
    background: url('../common/images/UI-04.png') no-repeat center;
    background-size: cover;
    display: block;
}
.soc .soc_list_img {
    width: 1.1rem;
    height: 1.1rem;
    display: block;
    text-align: center;
    vertical-align: middle;
    margin-bottom: 0.1rem;
}

/* 企业名称下的小标示 */
.association_desc .company_child {
  font-size: 0.2rem;
  color: #999;
  line-height: 1;
  display: table-cell;
  padding-top: 0.12rem;
}
.company_child .child_index {
  display: inline-block;
  width: 1.2rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  overflow: hidden;
  line-height: 0.3rem;
}
.company_child em {
  vertical-align: top;
}
</style>
